<template>
  <a-card title="领取概况" :style="{ marginTop: '20px' }">
    <div class="table-operator">
      <s-table
        bordered
        ref="table"
        size="middle"
        :row-key="(record) => record.customer_id"
        :columns="accountColumns"
        :data="accountData"
      >
        <div
          slot="filterDropdown"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="c => (searchInput = c)"
            :placeholder="`筛选${column.title}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block;"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            筛选
          </a-button>
          <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
            重置
          </a-button>
        </div>
        <template slot="wechat" slot-scope="text">
          <a-button icon="plus" size="small" v-if="text == ''" @click="onChange">添加微信</a-button>
          <span v-else>{{ text }}</span>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button type="primary" size="small" @click="$router.push({ name: 'AddContract', query: {customer_id: record.customer_id} })">做合同</a-button>
          <a-button type="primary" size="small" @click="$router.push({ name: 'CustomerDetail', params: {id: record.customer_id} })">详情</a-button>
          <!--          <a-rate :count="1" :default-value="0" @change="onChange" />-->
        </template>
      </s-table>
    </div>
    <a-modal
      title="添加微信信息"
      v-model="wechatVisible"
      @ok="onSubmit"
    >
      <a-form-model
        ref="wechatForm"
        :model="wechatForm"
        :rules="wechatRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="客户电话">
          <a-row :gutter="20">
            <a-col :span="16">
              <a-input readOnly type="text" value="13233297926、13233297926、15303566837" />
            </a-col>
            <a-col :span="6">
              <a-button type="primary">微信是否同号</a-button>
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item label="微信号码" prop="wechat">
          <a-input type="text" v-model="wechatForm.wechat" placeholder="请输入微信号" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import customerColumns from '@/columns/customer'
// import { getNotAccounting } from '@/api/customer'

export default {
  components: {
    STable
  },
  name: 'AccountCustomer',
  data () {
    return {
      accountColumns: customerColumns.other2,
      accountData: parameters => {
        return new Promise(resolve => {
          resolve({
            data: [
              {
                customer_type: '会计同行',
                business_name: '天猫',
                phone: '13233297926、13233297926、15303566837',
                received_at: '2020-01-01 12:12:12',
                wechat: ''
              },
              {
                customer_type: '驳回复审',
                business_name: '天猫',
                phone: '13233297926、13233297926、15303566837',
                received_at: '2020-01-01 12:12:12',
                wechat: '13233297926'
              }
            ]
          })
        })
        // return getNotAccounting(parameters).then(res => {
        //   return res.result
        // })
      },
      customerId: '',
      modalVisible: false,
      searchInput: null,
      searchText: '',
      wechatVisible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      wechatForm: {},
      wechatRules: {
        wechat: [{ required: true, message: '必须输入已添加的微信号', trigger: 'blur' }]
      }
    }
  },
  methods: {
    onChange () {
      this.wechatVisible = true
    },
    onSubmit () {
      this.$refs.table.refresh()
    },
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    handleReset (clearFilters) {
      clearFilters()
      this.searchText = ''
    }
  }
}
</script>

<style scoped>

</style>
